<template>
	<view>
		<u-tabbar :bg-color="isVideo ? 'rgba(22,24,35, 0.1)' : '#fff'" v-model="current" :list="vuex_tab_bar.list"
			:active-color="isVideo ? '#fff' : vuex_tab_bar.activeColor"
			:inactive-color="isVideo ? '#fff' : vuex_tab_bar.inactiveColor" :border-top="isVideo ? false : true"
			:botBorder="isVideo" @change="onChange">
			<view :style="{ '--process': process + '%' }" v-if="isVideo" slot="process" class="border_process"></view>
		</u-tabbar>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		uniLinkTo
	} from '../../utils/uniPromise';

	export default {
		props: {
			isVideo: {
				type: Boolean,
				default: false
			} // 是否视频播放页
		},
		data() {
			return {};
		},
		computed: {
			...mapState(['vuex_tab_bar', 'vuex_tab_page', 'process']),
			current: {
				get() {
					return this.$store.state.vuex_tab_bar.current;
				},
				set(value) {
					this.$store.commit('$uStore', {
						name: 'vuex_tab_bar.current',
						value
					});
				}
			}
		},
		methods: {
			onChange(index) {
				uniLinkTo(this.vuex_tab_page[index], 'switchTab');
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .u-fixed-placeholder {
		opacity: 0;
	}

	.border_process {
		position: absolute;
		top: 0;
		width: var(--process);
		border-top: 1rpx solid #fff;
	}

	// 支付宝不知道为毛有有个边框 所以要去掉 为什么 有缘人解答下？？？
	/*  #ifdef  MP-ALIPAY*/
	::v-deep .u-tabbar__content__item {
		border: 0 !important;
	}
	/*#endif*/
</style>
